<div id="finicial_voucher_rule_config_one" class="clearfix">
  <div class="vocher-one-page">
    <div class="vocher-rule-menu-container">
      <div class="block-name">帐套名称</div>
      <div class="vocher-rule-menu">
        <vue-scroll :ops="ops" style="height: 100%;">
          <div class="first-menu" v-for="(item,index) in accountingLists">
            <ul class="second-menu">
              <li  class="second-menu-item" :data-id="item.id" :class="{'active':item.id == selectedAccountId }" @click="selectAccounting(item.id,item.name)">
                <p class="second-name">{{item.name}}</p>
              </li>
            </ul>
          </div>
        </vue-scroll>
      </div>
    </div>

    <div class="vocher-rule-details-container">
      <div class="block-name">
        <span>凭证规则</span>
      </div>
      <div class="layout">
        <div class="vocher-rule-table">
          <div class="title dy-flex">
            <div class="item dy-fx-3">业务类型</div>
            <div class="item dy-fx-1">状态</div>
            <div class="item dy-fx-1">操作</div>
          </div>

          <ul class="content">
            <li v-for="(item,index) in voucherRules">
              <div class="first-item-row dy-flex">
                <div class="item dy-fx-3">{{item.bizCategoryName}}</div>
                <div class="item dy-fx-1"></div>
                <div class="item dy-fx-1"><a href="javascript:;" @click="addVoucherRule(item.bizCategoryCode,item.bizCategoryName,item.rules)">新增业务场景</a></div>
              </div>
              <div class="second-item-row dy-flex" v-for="(item1,index1) in item.rules">
                <div class="item dy-fx-3">{{ item1.name }}</div>
                <div class="item dy-fx-1">{{ item1.status == 'Y' ? '启用':'停用' }}</div>
                <div class="item dy-fx-1">
                  <a href="javascript:;" class="mr-10" @click="changeVoucherRuleState(item1.id,item1.status)">{{ item1.status == 'N' ? '启用':'停用' }}</a>
                  <a href="javascript:;" class="mr-10" @click="deleteVoucherRule(item1.id)">删除</a>
                  <a href="javascript:;" @click="setVoucherRule(item.bizCategoryCode,item.bizCategoryName,item1.id)">设置</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>

<script src="modules/system_config/scripts/finicial_voucher_rule_config_one.js" charset="utf-8"></script>

<style type="text/css">

.vocher-rule-menu-container{
  position: absolute;
  width: 230px;
  left:0;
  top:66px;
  bottom:0;
  border: 1px solid #e5e5e5;
  border-left: 0;
  border-top-right-radius: 4px;
}

.vocher-rule-menu-container .block-name{
  height: 46px;
  line-height: 46px;
  color:#A5AAB7;
  padding-left: 16px;
  font-weight: bold;
  background-color: #EFEFEF;
  overflow: hidden;
}

.vocher-rule-menu{
  position: absolute;
  top:45px;
  bottom:45px;
  width: 100%;
}

.vocher-rule-menu .first-menu .first-name{
  color:#4B4B4B;
  font-weight: bold;
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
  padding-left: 16px;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
}

.vocher-rule-menu .first-menu .first-name:hover{
  background-color: #F7F7F7;
}
.vocher-rule-menu .first-menu .first-name.active{
  background-color: #5e67a5;
  color:#fff;
}

.vocher-rule-menu .second-menu-item{
  position: relative;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
}

.vocher-rule-menu .second-menu-item:hover{
  background-color: #F7F7F7;
}
.vocher-rule-menu .second-menu-item.active{
  background-color: #5e67a5;
  color:#fff;
}

.vocher-rule-menu .second-menu-item .second-name{
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
  padding-left: 36px;
  font-size: 14px;
}

.vocher-rule-menu .second-menu-item .delete-icon{
  position: absolute;
  right:20px;
  top:50%;
  transform: translate(0,-50%);
}

.vocher-rule-menu-container .add-btn{
  width: 100%;
  bottom: 0;
  height: 45px;
  line-height: 45px;
}

.vocher-rule-details-container{
  width:785px;
  float: right;
  border: 1px solid #e5e5e5;
  margin-top: 10px;
  border-top-left-radius: 4px;
}
.vocher-rule-details-container .block-name{
  height: 45px;
  line-height: 45px;
  padding-left: 11px;
  font-weight: bold;
  color:#A5AAB7;
  background-color: #EFEFEF;
  overflow: hidden;
}

.vocher-rule-details-container .block-name .right-button{
  float: right;
  padding-right: 11px;
  color:#666;
  cursor: pointer;
}
.vocher-rule-details-container .block-name .icon{
  color:#565E99;
}


.vocher-rule-details-container .layout{
  padding: 20px 11px 20px;
}
.vocher-rule-table{
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.vocher-rule-table .title{
  overflow: hidden;
  background-color: #F0F2FF;
  color:#A5AAB7;
  font-weight: bold;
}
.vocher-rule-table .title .item{
  float: left;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-right: 1px solid #e5e5e5;
}
.vocher-rule-table .title .item:first-child{
  text-align: left;
  padding-left: 21px;
}
.vocher-rule-table .first-item-row{
  overflow: hidden;
  background-color: #F9F9F9;
  height: 40px;
  line-height: 40px;
}
.vocher-rule-table .first-item-row .item{
  border-right: 1px solid #e5e5e5;
  text-align: center;
}
.vocher-rule-table .first-item-row .item:first-child{
  font-weight: 500;
  color:#4B4B4B;
  padding-left: 21px;
  text-align: left;
}
.vocher-rule-table .first-item-row .item:last-child{
  color:#337AB7;
  cursor: pointer;
}
.vocher-rule-table .second-item-row{
  overflow: hidden;
  height: 40px;
  line-height: 40px;
  color:#666666;
  border-bottom: 1px solid #e5e5e5;
}
.vocher-rule-table .second-item-row .item{
  border-right: 1px solid #e5e5e5;
  text-align: center;
}
.vocher-rule-table .second-item-row .item:first-child{
  padding-left: 21px;
  text-align: left;
}
.vocher-rule-table .second-item-row .item:last-child{
  color:#337AB7;
  cursor: pointer;
}
.vocher-num-container{
  overflow: hidden;
}
.vocher-num-container p{
  float: left;
  color:#666;
  font-weight: bolder;
  line-height: 34px;
}
.vocher-num-container .btn{
  float: right;
  text-align: right;
  padding-right: 0;
}
.vocher-num-table{
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.vocher-num-table .title{
  height: 40px;
  line-height: 40px;
  background-color: #F0F2FF;
  color:#A5AAB7;
  font-weight: bolder;
  text-align: center;
}
.vocher-num-table .title div{
  border-right: 1px solid #e5e5e5;
}
.vocher-num-table .title div:last-child{
  border-right: none;
}
.vocher-num-table .vocher-num-table-row{
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
}
.vocher-num-table .vocher-num-table-row:last-child{
  border-bottom: none;
}
.vocher-num-table .vocher-num-table-item{
  /* padding: 0 10px 0 16px; */
  align-items: center;
  display: flex;
  border-right: 1px solid #e5e5e5;
}
.vocher-num-table .vocher-num-table-item:last-child{
  border-right: none;
}

</style>
